<template>
  <div class="box">
    <el-input
        type="textarea"
        placeholder="请输入内容"
        :autosize="true"
        :value="text"
        @input="handleInput"
        @keypress.enter.native="send"
        @keyup.enter.native="sending = false"
        spellcheck="false"
    >
    </el-input>
    <div class="send-btn" @click="sendBtn">发送</div>
  </div>
</template>

<script>
export default {
  name: "send",
  data(){
    return {
      text:'',
      sending:false
    }
  },
  methods:{
    handleInput(v){
      if(!this.sending) {
        this.text = v
      }
    },
    send(){
      this.sending = true
      if(this.text.trim().length == 0) {
        return
      }
      this.$emit('send',this.text)
      this.text = ''
    },
    sendBtn(){
      this.send()
      this.sending = false
    }
  }
}
</script>

<style scoped lang="less">
.box {
  position: relative;
  border-top: 1px solid #E8E8E8;
  background: #f4f4f4;
  .send-btn {
    display: none;
    cursor: pointer;
  }
  /deep/ .el-textarea {
    padding: 0;
    width: 100% !important;
    .el-textarea__inner {
      height: 160px !important;
      border: none;
      border-radius: 0;
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
      font-size: 16px;
      color: #000000;
      resize:none;
      flex: 1;
    }
  }
}
@media(max-width: 679px) {
  .box{
    padding: 8px;
    display: flex;

    .send-btn {
      display: block;
      height: 34px;
      line-height: 34px;
      padding: 0 14px;
      background: #0091ff;
      color: #FFFFFF;
      //border-radius: 4px;
      font-size: 14px;
    }
    /deep/ .el-textarea {
      flex: 1;
      width: auto;
      padding: 0 10px ;
      .el-textarea__inner {
        flex: 1;
        height: 34px !important;
      }
    }
  }
}
</style>
